<script  setup >
import { onMounted, ref,computed, watch } from 'vue'
import {Search,Edit,Star, Delete} from '@element-plus/icons-vue'
import { getAreaListAPI } from '@/api/area'
const searchInput = ref('')


// 区域列表数据
const tableData = ref([
  {
    id: '1',
    name: '张三',
    age: '24',
    sex: '男',
    IdCard: '410181200010011290',
    address: '22栋,3单元,门牌号303'
  },
  {
    id: '2',
    name: '李芳',
    age: '30',
    sex: '女',
    IdCard: '410181199410011290',
    address: '22栋,3单元,门牌号313'
  },
  {
    id: '3',
    name: '李四',
    age: '34',
    sex: '男',
    IdCard: '410181199010011270',
    address: '22栋,3单元,门牌号303'
  },
  {
    id: '4',
    name: '王五',
    age: '29',
    sex: '男',
    IdCard: '410181199110011290',
    address: '22栋,3单元,门牌号303'
  }

])
const page = ref(1)
const pageSize = ref(3)
const total = ref(1)
// 获取区域列表数据
const getAreaList = async () => {
  // console.log(page.value);
  // const res = await getAreaListAPI({page:page.value, pageSize:pageSize.value})
  // console.log(res);
  // tableData.value = res.data.rows
  // total.value = res.data.total
}
// 搜索界面 (这里用请求)
const getPageById = () => {
  // 确保 searchInput.value 是数组并且有元素
  page.value = 1
if (searchInput.value) {
  const searchValue = searchInput.value;
  // 确保 searchValue 是字符串且不是空字符串
  console.log(searchValue);
  
  if (searchValue !== '') {
    // 确保 tableData 是响应式引用并且 item.id 是字符串
    console.log(tableData.value);
    
    tableData.value = tableData.value.filter(item => {
      return String(item.id).includes(searchValue);
    });
    console.log(tableData.value);
    
    total.value = tableData.value.length
  }
}
  
}

// 修改页面
const editPage = (newPage) => {
  console.log(newPage);
  page.value = newPage;
  getAreaList()
};
onMounted(()=>{
  getAreaList()
})
watch(searchInput, (newVal,oldVal) => {
  console.log('new',newVal);
  if(newVal === '') {
    page.value= 1
    getAreaList()
  }
})

</script>
<template>
  <div class="area-page">
    <div class="title">
      <el-input
        v-model="searchInput"
        style="width: 200px;"
        placeholder="请输入要查询的区域"
        clearable
      />
      <el-button type="primary" @click="getPageById"><el-icon><Search /></el-icon></el-button>
      <el-button type="primary">添加区域</el-button>
    </div>
    <div class="table-content">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column fixed prop="id" label="编号" min-width="120" />
        <el-table-column prop="name" label="姓名" min-width="120" />
        <el-table-column prop="age" label="年龄" min-width="120" />
        <el-table-column prop="sex" label="性别" min-width="120" />
        <el-table-column prop="IdCard" label="身份证号" min-width="200" />
        <el-table-column prop="address" label="家庭住址" min-width="200" />
        <el-table-column fixed="right" label="操作" width="120">
          <template #default="{ row }">
            <el-tooltip class="item" effect="dark" content="编辑" placement="top">
                <el-button type="primary" :icon="Edit" circle  @click="editCarArea(row.id)"></el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="删除" placement="top">
                <el-button type="danger" :icon="Delete" circle  @click="deleteCarArea(row.id)"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @current-change="editPage"
        v-model:current-page="page"
        :page-size="pageSize"
        layout="prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>

  </div>
 
  
</template>

<style scoped lang='scss'>
.area-page {
  padding: 15px;
  width: 100%;
  height: 100%;
  overflow: auto;
  .title{
    display: flex;
  }
  .table-content{
    width: 100%;
    height: 100%
  }
}
</style>